<html>
<head>
	<title>Echarts - 树状图实例</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<script src="cjj/esl.js"></script>
	<script src="cjj/config.js"></script>
	<script src="cjj/jquery.min.js"></script>
</head>
<style>
html,body,#main {width: 100%;padding: 0;margin: 0;height: 100%;}
</style>
<body>
<div id="main"></div>
<script>
require(['echarts'], function(echarts) {
	var chart = echarts.init(document.getElementById('main'), null, {});
	window.onresize = function() {chart.resize();};
	
	$.getJSON('cjj/flare2.json').done(function(data) {
		echarts.util.each(data.children, function(datum, index) {
			index % 2 === 0 && (datum.collapsed = true);
		});
		console.log(data);
		chart.setOption({
			tooltip: {
				trigger: 'item',
				triggerOn: 'mousemove'
			},

			series: [{
				type: 'tree',
				id: '3',
				data: [data],

				top: '1%',
				left: '7%',
				bottom: '1%',
				right: '20%',
				roam: true,
				symbolSize: 7,
				initialTreeDepth: -1,

				label: {
					position: 'left',
					verticalAlign: 'middle',
					align: 'right'
				},

				leaves: {
					label: {
						position: 'right',
						verticalAlign: 'middle',
						align: 'left'
					}
				},

				//expandAndCollapse: true,
				animationDuration: 550,
				animationDurationUpdate: 750
			}]
		});

		/*chart.on('click', function (params) {
			window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.value));
		});*/
	});
});
</script>
</body>
</html>
